<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf-CRUD</title>
    <base th:href="@{/}">
    <style>
        #table {
            width: 800px;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }

        #table th, #table td {
            border: 1px solid black;
            width: 200px;
        }

        table {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h1>模块练习页面</h1>
    <a href="findUsers">
        <button>点击展示用户信息</button>
    </a>
    <hr>
    <table id="table">
        <thead>
            <tr>
                <th>序号</th>
                <th>ID号</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="5" th:if="${#lists.isEmpty(userList)}">
                    <h3>用户信息为空,请添加用户信息~</h3>
                </td>
            </tr>
            <tr th:each="user,status:${userList}">
                <td th:text="${status.count}">1</td>
                <td th:text="${user.userid}">1001</td>
                <td th:text="${user.username}">张三</td>
                <td th:text="${user.email}">888@qq.com</td>
                <td>
                    <a th:href="@{/findUserById(userid=${user.userid})}">
                        <button>编辑</button>
                    </a>
                    <a th:href="@{/deleteById(userid=${user.userid})}">
                        <button>删除</button>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
    <hr>
    <form action="addUser" method="post">
        <table id="add-user">
            <caption>新增用户</caption>
            <tbody>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="pwd"></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email"/></td>
                </tr>
                <tr>
                    <td>
                        <button type="submit">提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
    <hr>
    <form action="updateUser" method="post">
        <table id="update-user" th:unless="${updateUser==null}">
            <!--   通过隐藏域的方式 实现主键的提交 -->
            <input type="hidden" name="userid" th:value="${updateUser.userid}">
            <caption>修改用户</caption>
            <tbody>
                <tr>
                    <td>用户名:</td>
                    <td><input type="text" name="username" th:value="${updateUser.username}"></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="pwd" th:value="${updateUser.pwd}" placeholder="默认密码不修改, 如果赋值则修改"></td>
                </tr>
                <tr>
                    <td>邮箱:</td>
                    <td><input type="text" name="email" th:value="${updateUser.email}"/></td>
                </tr>
                <tr>
                    <td>
                        <button type="submit">提交</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

</body>
</html>